<template>
  <div class="add">
    <el-card class="add-container">
      <el-form class="shopForm" ref="shopForm" :rules="rules" :model="shopForm" label-width="100px">
        <el-form-item label="店铺名称" prop="shopName">
          <el-input v-model="shopForm.shopName" placeholder="请输入店铺名称"></el-input>
        </el-form-item>
        <el-form-item label="店铺地址" prop="shopAddress">
          <el-input v-model="shopForm.shopAddress" placeholder="请输入店铺地址"></el-input>
        </el-form-item>
        <el-form-item label="店铺简介" prop="shopDescription">
          <el-input type="textarea" v-model="shopForm.shopDescription"
                    placeholder="请输入商品简介(100字)"></el-input>
        </el-form-item>
        <el-form-item label="起送费" prop="minDeliveryRate">
          <el-input-number v-model="shopForm.minDeliveryRate" :min="0" :max="999" @change="handleChange" placeholder="请输入店铺起送费"/>
        </el-form-item>
        <el-form-item label="配送费" prop="shippingPrice">
          <el-input-number v-model="shopForm.shippingPrice" :min="0" :max="10" @change="handleChange" placeholder="请输入店铺配送费"/>
        </el-form-item>
        <el-form-item label="店铺类型" prop="shopType">
          <el-select v-model="shopForm.shopType" placeholder="请选择店铺类型">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item required label="店铺主图" prop="shopImg">
          <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              accept="jpg,jpeg,png"
              :drag="true"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
          >
            <img style="width: 100px; height: 100px; border: 1px solid #e9e9e9;"
                 v-if="shopForm.shopImg"
                 :src="shopForm.shopImg" class="avatar" alt="店铺主图">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="详情内容">
          <div ref='editor'></div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitAdd()">{{ id ? '立即修改' : '立即创建' }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { ref } from 'vue'
export default ({
  name: "AddShopInfo",
  data(){
    return{
      shopForm: {
        shopName: '',
        shopAddress: '',
        shopDescription: '',
        minDeliveryRate: '',
        shippingPrice: '',
        shopType: '',
        shopImg: '',
      },
      rules: {
        shopName: [
          {required: 'true', message: '请填写店铺名称', trigger: ['change']}
        ],
        shopAddress: [
          {required: 'true', message: '请填写店铺地址', trigger: ['change']}
        ],
        minDeliveryRate: [
          {required: 'true', message: '请填写店铺起送费（0到999）', trigger: ['change']}
        ],
        shippingPrice: [
          {required: 'true', message: '请填写店铺配送费（0到10）', trigger: ['change']}
        ],
        shopType: [
          {required: 'true', message: '请选择店铺类型', trigger: ['change']}
        ],
        shopImg: [
          {required: 'true', message: '请上传店铺主图', trigger: ['change']}
        ],
      },
    }
  },
  setup() {
    return {
      options: ref([
        {
          value: '1',
          label: '美食',
        },
        {
          value: '2',
          label: '早餐',
        },
        {
          value: '3',
          label: '跑腿代购',
        },
        {
          value: '4',
          label: '汉堡披萨',
        },
        {
          value: '5',
          label: '甜品饮品',
        },
        {
          value: '6',
          label: '速食简餐',
        },
        {
          value: '7',
          label: '地方小吃',
        },
        {
          value: '8',
          label: '米粉面馆',
        },
        {
          value: '9',
          label: '包子粥铺',
        },
        {
          value: '10',
          label: '炸鸡炸串',
        },
      ]),
    }
  },
})
</script>

<style scoped>
#app > section > section > section > main > div > div > div > form > div > div > div,
#app > section > section > section > main > div > div > div > form > div > div > div > input
{
  width: 60%;
}

.add {
  display: flex;
}

.add-container {
  flex: 1;
  height: 100%;
}

#app > section > section > section > main > div > div > div > form > div:nth-child(7) > div > div {
  width: 100%;
}

</style>